<template>
  <!-- 出库记录 -->
  <div>
    <!-- 顶部搜索栏 -->
    <div class="topSearch">
      <el-form class="searcView" :model="searchModel">
        <el-input
          v-model="searchModel.orderSn"
          placeholder="出库单号"
          style="width: 183px; margin-right: 30px"
        ></el-input>

        <el-select
          v-model="searchModel.checkCategory"
          placeholder="出库类型"
          style="width: 183px; margin-right: 30px"
        >
          <el-option label="百货食品" value="baihuo"></el-option>
          <el-option label="服装鞋包" value="fuzhuabg"></el-option>
          <el-option label="美妆饰品" value="meizhuabg"></el-option>
        </el-select>

        <el-input
          v-model="searchModel.orderSn"
          placeholder="出库单号"
          style="width: 183px; margin-right: 30px"
        ></el-input>

        <el-input
          v-model="searchModel.rukuTime"
          placeholder="入库开始时间"
          style="width: 183px; margin-right: 10px"
        ></el-input>

        <el-input
          v-model="searchModel.deadline"
          placeholder="入库截至时间"
          style="width: 183px; margin-right: 10px"
        ></el-input>

        <el-button size="small" class="searchBtn" @click="searchClick"
          >查询</el-button
        >
        <el-button size="small" class="searchBtn" @click="exportClick"
          >导出EXCEl</el-button
        >
      </el-form>
    </div>
    <!-- 中间表格 -->
    <el-table
      id="table"
      :data="tableData"
      stripe
      border
      max-height="700px"
      style="width: 100%"
    >
      <el-table-column
        prop="rukuNum"
        label="入库单号"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="rukuTime"
        label="入库时间"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="rukuType"
        label="入库类型"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="orderSn"
        label="订单编号"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="orderPayTime"
        label="订单支付时间"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="vipPhone"
        label="会员手机"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="vipName"
        label="会员名称"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="orderAddress"
        label="订单地址"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="operator"
        label="操作员"
        align="center"
      ></el-table-column>

      <el-table-column fixed="right" label="操作" width="210" align="center">
        <template v-slot="scope">
          <el-button @click="detailClick(scope.row)" type="danger" size="mini"
            >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin: 10px auto; width: 600px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next,total,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        :total="100"
      >
      </el-pagination>
    </div>
    <!-- 详情弹框 -->
    <el-dialog
      width="50"
      title="出库单详情"
      :visible.sync="rukuDetailDialogClick"
      left
    >
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>
      <el-form
        class="rowlayout"
        :model="rukuFormDetailModel"
        :label-width="formLabelWidth"
      >
        <el-form-item align="center" style="margin-right: 80px">
          <font size="4">出库单号:{{ rukuFormDetailModel.chukuNum }}</font>
        </el-form-item>
      </el-form>

      <el-table
        :data="rukuFormDetailModel.rukuForm"
        stripe
        border
        max-height="400px"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="商品名称"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="category"
          label="商品分类"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="settlePrice"
          label="结算单价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="chukuCount"
          label="出库数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="subtotal"
          label="小计"
          align="center"
        ></el-table-column>
      </el-table>
      <el-form class="dialogDetailForm" label-width="auto">
        <el-row>
          <el-col :span="6">
            <el-form-item label="总计:">
              <!-- <el-input
                v-model="rukuFormDetailModel.totalCount"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>数量{{ rukuFormDetailModel.totalCount }}个</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运费:">
              <!-- <el-input
                v-model="rukuFormDetailModel.totalCount"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>{{ 0.0 }}元</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="商品金额总计:">
              <!-- <el-input
                v-model="rukuFormDetailModel.totalCount"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>{{ 0.0 }}元</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="总金额:">
              <!-- <el-input
                v-model="rukuFormDetailModel.totalCount"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>{{ rukuFormDetailModel.totalCount }}元</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="出库类型:">
              <!-- <el-input
                v-model="rukuFormDetailModel.totalCount"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>{{ rukuFormDetailModel.rukuType }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="关联订单号:">
              <!-- <el-input
                v-model="rukuFormDetailModel.totalCount"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>{{ rukuFormDetailModel.associationOrderSn}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="会员姓名:">
              <!-- <el-input
                v-model="rukuFormDetailModel.vipName"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>{{ rukuFormDetailModel.vipName}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系电话:">
              <!-- <el-input
                v-model="rukuFormDetailModel.tel"
                :disabled="true"
                style="width: 90%"
              ></el-input> -->
              <span>{{ rukuFormDetailModel.tel}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入备注内容"
            v-model="rukuFormDetailModel.textarea"
            style="width: 95%"
          ></el-input>
        </el-form-item>

        <el-col align="right">
          <span style="margin-right: 20px;">出库状态:已出库</span>
          <span>操作员:张三</span>
        </el-col>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "outboundRecord",
  data() {
    return {
      searchModel: {
        orderSn: "", //订单编号
        checkCategory: "", //出库类型
        rukuTime: "", //入库时间
        deadline: "", //截至时间
      },

      tableData: [
        {
          rukuNum: "20332112321", //入库单号
          rukuTime: "2023-11-11-01：23", //入库时间
          rukuType: "订单退货", //订单类型
          orderSn: "20332112321", //订单编号
          orderPayTime: "2023-11-11-01：23", //订单支付时间
          vipPhone: "1823232123", //会员手机
          vipName: "李四", //会员名称
          orderAddress: "河南省郑州市啦啦啦", //订单地址
          operator: "3232", //操作员
        },
      ],

      rukuFormDetailModel: {
        rukuForm: [
          {
            name: "裤子", //商品名称
            category: "服饰", //商品分类
            settlePrice: "888", //结算价格
            chukuCount: "666", //出库数量
            subtotal: "200", //小计
          },
          {
            name: "裤子", //商品名称
            category: "服饰", //商品分类
            settlePrice: "888", //结算价格
            chukuCount: "666", //出库数量
            subtotal: "200", //小计
          },
          {
            name: "裤子", //商品名称
            category: "服饰", //商品分类
            settlePrice: "888", //结算价格
            chukuCount: "666", //出库数量
            subtotal: "200", //小计
          },
        ],
        chukuNum: "20231101202321",
        totalCount: "10", //总计数量
        totalMoney: "8888",
        rukuType: "订单出库", //入库类型
        associationOrderSn: "2030020201023012", //关联订单号
        vipName: "孙悟空", //会员姓名
        tel: "18749788888", //联系电话
        textarea: "", //备注
      },
      formLabelWidth: "120px",
      rukuDetailDialogClick: false,
    };
  },
  computed: {},

  methods: {
    //查询
    searchClick() {
      console.log("查询");
    },
    //导出Excel
    exportClick() {
      console.log("导出Excel");
      exportExecl("table", "模板.xlsx");
    },

    //详情
    detailClick(row) {
      // console.log("第", row, "行");
      console.log(row);
      this.rukuDetailDialogClick = true;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style scoped>
.topSearch {
  border: 1px solid rgb(228, 228, 288);
  background-color: white;
  width: 98%;
  height: 45px;
  padding: 20px;
}
.searcView
/* display: flex 默认水平排列 */ {
  display: flex;
}
.searchBtn {
  margin-left: 50px;
  width: 100px;
  height: 30px;
  color: white;
  background-color: rgb(41, 59, 105);
}
</style>
